'use client';
import Link from 'next/link';
import { usePathname } from 'next/navigation';
import { useAppStore } from '@/store';

export default function Header() {
  // 获取当前路径
  const pathname = usePathname();
  const incrementRedrawTrigger = useAppStore((state) => state.incrementRedrawTrigger);

  // 对于当前在结果页面的情况，点击"随便来一个"应该触发重新随机
  const handleRandomClick = (e: React.MouseEvent) => {
    if (pathname === '/result' || pathname.startsWith('/result')) {
      e.preventDefault();
      incrementRedrawTrigger();
    }
  };

  return (
    <header className="border-b border-black/10 dark:border-white/15 bg-background sticky top-0 z-20">
      <div className="mx-auto max-w-4xl px-4 py-3 flex items-center justify-between">
        <Link href="/" className="font-semibold tracking-tight text-lg" aria-label="回家页面">
          What to Eat
        </Link>
        <nav className="flex items-center gap-4 text-sm" role="navigation" aria-label="主导航">
          <Link
            href="/result?mode=random"
            onClick={handleRandomClick}
            className={`hover:underline hover:underline-offset-4 ${pathname === '/result' || pathname.startsWith('/result') ? 'font-medium underline' : ''}`}
            prefetch={true}
          >
            随便来一个！
          </Link>
          <Link
            href="/filter"
            className={`hover:underline hover:underline-offset-4 ${pathname === '/filter' ? 'font-medium underline' : ''}`}
            prefetch={false}
          >
            筛选一下
          </Link>
        </nav>
      </div>
    </header>
  );
}
